<template>
	<view class="recommend-container">
		
		<view v-for="(item, index) in recommendData" :key="index" class="recommend-item" @click="goToPage(item.linkType, item.linkValue, index)">
			<view class="title-group">
				<view class="title">
					<view class="icon" :style="{backgroundImage: 'url(' + item.titleIconUrl + ')'}"></view>
					{{item.title}}
				</view>
				<view class="subtitle" :class="className[index]">{{item.subTitle}}</view>
			</view>
		
			<image :src="item.coverImageUrl" class="img"></image>
		</view>
	</view>
</template>

<script>
export default{
	props:{
		initializationParams: {
			type: String,
			default: ''
		},
		fragmentId: {
			type: Number,
			default: 0
		},
		//来源模块在页面的排序序号
		moduleOrder: {
			type: [Number,String],
			default: 0
		}
	},
	data(){
		return {
			recommendData: [],
			className:['one','two','three','four','five','six']
		}
	},
	created() {
		this.recommendData = JSON.parse(this.initializationParams);
	},
	methods:{
		goToPage(type, value, i) {
			//1003为资源位组件
			var statInfo = {'Ref_Module_Type':type,'Ref_Module_ID':'1003','Ref_Module_Order':this.moduleOrder,'Ref_Module_Inner_Order':i+1}
			this.$utils.handleLink(type, value,this.recommendData[i],{statInfo:statInfo},this.fragmentId)
		}
	}
}
</script>

<style lang="scss" scoped>
.recommend-container{
	background-color: #ffffff;
	border-radius: 8rpx;
	display: -webkit-box;
	display: -webkit-flex;
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	align-content: space-between;
	padding: 12rpx;
	margin: 0 auto;
	width: 702rpx;
	// margin: 16rpx 24rpx;
	.recommend-item{
		display: block;
		margin: 12rpx;
		width: 315rpx;
		.title-group{
			text-align: left;
			margin-bottom: 12rpx;
			.icon{
				display: inline-block;
				width: 32rpx;
				height: 32rpx;
				background-color: #EAEAEA;
				margin-right: 12rpx;
				background-size: contain;
				border-radius: 100%;
				vertical-align: top;
			}
			.title{
				color: #333;
				font-size: 32rpx;
				font-weight: 600;
				margin-bottom: 14rpx;
				line-height: 32rpx;
			}
			.subtitle{
				color: #666;
				font-size: 24rpx;
				-webkit-background-clip:text;
				&.one{color: #EE7831; 
					background-color:linear-gradient(90deg, rgba(255,168,97,1) 0%, rgba(255,0,17,1) 100%);
				}
				&.two{color: #E51E1D;
					background-color:linear-gradient(90deg, rgba(255,123,169,1) 0%, rgba(230,30,28,1) 100%);
				}
				&.three{color: #FB3B7C;
					background-color:linear-gradient(90deg, rgba(255,157,174,1) 0%, rgba(241,4,70,1) 100%);
				}
				&.four{color: #FAA720;
					background-color:linear-gradient(90deg, rgba(250,204,50,1) 0%, rgba(237,148,1,1) 100%);
				}
				&.five{color: #3F8EF1;
					background-color:linear-gradient(90deg, rgba(120,196,249,1) 0%, rgba(37,116,240,1) 100%);
				}
				&.six{color: #9178F3;
					background-color:linear-gradient(90deg, rgba(191,178,255,1) 0%, rgba(135,50,230,1) 100%);
				}
			}				
		}
		.img{
			width: 315rpx;
			height: 160rpx;
			background-color: #EAEAEA;
		}
	}
}	
</style>
